import React from 'react';
import { RecordListProps} from './types';

const StatusIcon: React.FC<{ status: string }> = ({ status }) => {
  switch (status) {
    case 'success':
      return (
        <div className="w-6 h-6 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
          <svg className="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>
      );
    case 'error':
      return (
        <div className="w-6 h-6 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center">
          <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </div>
      );
    case 'pending':
      return (
        <div className="w-6 h-6 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center">
          <svg className="w-4 h-4 text-yellow-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 5.757v8.486M5.757 10h8.486"/>
          </svg>
        </div>
      );
    default:
      return null;
  }
};

const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
  let bgColor = '';
  let textColor = '';
  let label = '';

  switch (status) {
    case 'success':
      bgColor = 'bg-green-100 dark:bg-green-900';
      textColor = 'text-green-800 dark:text-green-300';
      label = '成功';
      break;
    case 'error':
      bgColor = 'bg-red-100 dark:bg-red-900';
      textColor = 'text-red-800 dark:text-red-300';
      label = '错误';
      break;
    case 'pending':
      bgColor = 'bg-yellow-100 dark:bg-yellow-900';
      textColor = 'text-yellow-800 dark:text-yellow-300';
      label = '待处理';
      break;
    default:
      bgColor = 'bg-gray-100 dark:bg-gray-700';
      textColor = 'text-gray-800 dark:text-gray-300';
      label = '未知';
  }

  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${bgColor} ${textColor}`}>
      {label}
    </span>
  );
};

const RecordList: React.FC<RecordListProps> = ({
  records,
  viewMode,
  selectedIds,
  setSelectedIds,
  onViewDetails,
  onDelete,
  onRerun
}) => {
  const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.checked) {
      setSelectedIds(records.map(record => record.id));
    } else {
      setSelectedIds([]);
    }
  };

  const handleSelect = (id: string, checked: boolean) => {
    if (checked) {
      setSelectedIds([...selectedIds, id]);
    } else {
      setSelectedIds(selectedIds.filter(selectedId => selectedId !== id));
    }
  };

  const TableView = () => (
    <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead className="text-xs text-gray-700 dark:text-gray-300 uppercase bg-gray-50 dark:bg-gray-700">
          <tr>
            <th scope="col" className="px-4 py-3">
              <input
                type="checkbox"
                className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
                onChange={handleSelectAll}
                checked={records.length > 0 && selectedIds.length === records.length}
              />
            </th>
            <th scope="col" className="px-4 py-3">状态</th>
            <th scope="col" className="px-4 py-3">任务</th>
            <th scope="col" className="px-4 py-3">类别</th>
            <th scope="col" className="px-4 py-3">日期</th>
            <th scope="col" className="px-4 py-3">持续时间</th>
            <th scope="col" className="px-4 py-3">操作</th>
          </tr>
        </thead>
        <tbody>
          {records.map((record) => (
            <tr key={record.id} className="bg-white dark:bg-gray-800 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
              <td className="w-4 px-4 py-4">
                <input
                  type="checkbox"
                  className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
                  checked={selectedIds.includes(record.id)}
                  onChange={(e) => handleSelect(record.id, e.target.checked)}
                />
              </td>
              <td className="px-4 py-4">
                <StatusIcon status={record.status} />
              </td>
              <td className="px-4 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                {record.taskTitle}
              </td>
              <td className="px-4 py-4 text-gray-900 dark:text-gray-300">
                {record.category}
              </td>
              <td className="px-4 py-4 text-gray-900 dark:text-gray-300">
                {record.createdAt.toLocaleDateString()}
              </td>
              <td className="px-4 py-4 text-gray-900 dark:text-gray-300">
                {record.duration}
              </td>
              <td className="px-4 py-4 flex space-x-2">
                <button
                  type="button"
                  className="text-blue-600 dark:text-blue-400 hover:underline font-medium"
                  onClick={() => onViewDetails(record)}
                >
                  <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1.5 8c1.333-2 3.667-6 8.5-6 4.667 0 7 4 8.333 6-1.333 2-3.667 6-8.333 6-5 0-7.167-4-8.5-6Z"/>
                  </svg>
                </button>
                <button
                  type="button"
                  className="text-red-600 dark:text-red-400 hover:underline font-medium"
                  onClick={() => onDelete(record.id)}
                >
                  <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h18M7 8v8m6-8v8M3 5h14v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5zm4-4h6v4H7V1z"/>
                  </svg>
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

  const CardView = () => (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {records.map((record) => (
        <div key={record.id} className="bg-white dark:bg-gray-800 rounded-lg shadow">
          <div className="p-4 flex items-start">
            <div className="flex-shrink-0 mr-3">
              <input
                type="checkbox"
                className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2 mt-1"
                checked={selectedIds.includes(record.id)}
                onChange={(e) => handleSelect(record.id, e.target.checked)}
              />
            </div>
            <div className="flex-1">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center">
                  <StatusIcon status={record.status} />
                  <h3 className="ml-2 text-lg font-semibold text-gray-900 dark:text-white">{record.taskTitle}</h3>
                </div>
                <StatusBadge status={record.status} />
              </div>
              <div className="mb-4">
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">类别: <span className="font-medium text-gray-900 dark:text-gray-300">{record.category}</span></p>
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">日期: <span className="font-medium text-gray-900 dark:text-gray-300">{record.createdAt.toLocaleDateString()}</span></p>
                <p className="text-sm text-gray-500 dark:text-gray-400">持续时间: <span className="font-medium text-gray-900 dark:text-gray-300">{record.duration}</span></p>
              </div>
              <div className="flex items-center justify-between">
                <button
                  type="button"
                  className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm flex items-center"
                  onClick={() => onViewDetails(record)}
                >
                  <svg className="w-4 h-4 mr-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1.5 8c1.333-2 3.667-6 8.5-6 4.667 0 7 4 8.333 6-1.333 2-3.667 6-8.333 6-5 0-7.167-4-8.5-6Z"/>
                  </svg>
                  详情
                </button>
                <div className="flex space-x-2">
                  <button
                    type="button"
                    className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm flex items-center"
                    onClick={() => onRerun(record.id)}
                  >
                    <svg className="w-4 h-4 mr-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                      <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 4h1M1 8h18M9 12h1M5 16h9M17 5l1.5-1.5c.5-.5 1.5-.5 2 0 .5.5.5 1.5 0 2L19 7c-.5.5-1.5.5-2 0-.5-.5-.5-1.5 0-2zM12 13l-1.5 1.5c-.5.5-1.5.5-2 0-.5-.5-.5-1.5 0-2L10 11c.5-.5 1.5-.5 2 0 .5.5.5 1.5 0 2z"/>
                    </svg>
                    重新运行
                  </button>
                  <button
                    type="button"
                    className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-medium text-sm flex items-center"
                    onClick={() => onDelete(record.id)}
                  >
                    <svg className="w-4 h-4 mr-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                      <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h18M7 8v8m6-8v8M3 5h14v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5zm4-4h6v4H7V1z"/>
                    </svg>
                    删除
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );

  // 空状态显示
  if (records.length === 0) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center">
        <svg className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        <h3 className="mt-2 text-lg font-medium text-gray-900 dark:text-white">没有执行记录</h3>
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">没有找到符合条件的执行记录。</p>
      </div>
    );
  }

  return viewMode === 'table' ? <TableView /> : <CardView />;
};

export default RecordList; 